<script setup name="singer-mv">
import { onMounted, ref } from 'vue'
import { artistMv } from '@/services/singer'
import { formartNum, formatSongTime } from '@/utils/util'

const props = defineProps({
  id: {
    type: String,
    required: true
  }
})

const list = ref([])
const loading = ref(false)
const finished = ref(false)

// 获取歌手专辑
const loadData = async id => {
  loading.value = true
  const { mvs } = await artistMv({ id, limit: 30, offset: list.value.length })
  list.value.push(...mvs)
  loading.value = false
  if (mvs.length === 0) finished.value = true
}

const onLoad = async () => await loadData(props.id)

onMounted(() => {
  onLoad()
})

</script>

<template>
  <van-list v-model:loading="loading" :finished="finished" finished-text="~我是有底线的~" @load="onLoad">
    <RouterLink v-for="item in list" :key="item.id" :to="{ path: '/mvlist/detail', query: { id: item.id } }">
      <van-cell :border="false">
        <template #icon>
          <div class="icon">
            <van-image :src="item.imgurl" radius="6px" width="140" height="90" />
            <span class="duration">{{ formatSongTime(item.duration) }}</span>
          </div>
        </template>

        <template #title>
          <span class="name">{{ item.name }}</span>
        </template>

        <template #label>
          <div class="publishTime">{{ item.publishTime }}</div>
          <div class="playCount">{{ formartNum(item.playCount) }} 播放</div>
        </template>
      </van-cell>
    </RouterLink>
  </van-list>
</template>

<style scoped lang="scss">
.van-cell {
  color: var(--reversal-text);
  opacity: .9;

  .icon {
    position: relative;

    .duration {
      position: absolute;
      right: 2px;
      bottom: 4px;
      font-size: 10px;
    }
  }

  :deep(.van-cell__title) {
    padding-left: 10px;

    .name {
      font-size: 14px;
    }
  }

  :deep(.van-cell__label) {
    font-size: 10px;
  }
}
</style>